import { useEffect, useState } from "react";
import { Container } from "react-bootstrap";
import { Link, useParams } from "react-router-dom";
import api from "../request";

function TageDetailPage() {
    let params = useParams();
    let tagId = params.id;
    let [tag, setTag] = useState({});
    let [poems, setPoems] = useState([]);

    useEffect(() => {
        api.getTagById(tagId, (err, data, _) => {
            if (err) throw err;
            setTag(data.data);
        });

        api.listPoemsByTag(tagId, {}, (err, data, _) => {
            if (err) throw err;
            setPoems(data.data.list);
        });
    }, [params]);

    return (
        <Container>
            <h1>{ tag?.name }</h1>
            <ul style={{ listStyle: 'none' }}>
                {
                    poems.map((poem) => {
                        return (
                            <li key={poem.id}>
                                <Link to={'/poem/' + poem.id}><h4 className="ff-songti-title">{ poem.title }</h4></Link>
                            </li>
                        );
                    })
                }
            </ul>
        </Container>
    );
}

export default TageDetailPage;